<template>
    <div class="track_container flex" @click="goLike">
          <div class="track">
            <img :src="baseurl + like.albumCoverPath" class="track_img">
            <div class="track_text">
                {{ like.albumTitle }}
            </div>
            <div class="track_databoard">
                <div class="track_box1">
                    <div class="track_text1">
                        <img src="../../assets/images/bofang.png" class="track_icon">
                        {{ playCount }}
                    </div>
                </div>
                <div class="track_box2">
                    <div class="track_text2"><img src="../../assets/images/Sound-wave2.png" class="track_icon">{{ like.albumTrackCount }}</div>
                </div>
            </div>
          </div>
        </div>
    </template>
    
    <script setup lang="ts">
    import router from '@/router';
import type { AnyObject } from '@/types/newpeople';
    import { computed } from 'vue';
    
    const props = defineProps<{
        like:AnyObject
    }>()
    const baseurl = 'https://imagev2.xmcdn.com/'
    
    const formatNumber = (number:number) => {
      if (number >= 100000000) {
        return (number / 100000000).toFixed(2) + ' 亿';
      } else if (number >= 10000) {
        return (number / 10000).toFixed(2) + ' 万';
      } else {
        return number.toString();
      }
    }
    const playCount = computed(()=>{
      let playCount = formatNumber(props.like.albumPlayCount)
      return playCount
    })

    const goLike = ()=>{
        router.push(''+props.like.albumId)
    }
  
    </script>
    
    <style scoped lang="less">
    .track_container{
      display: block;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 345.2px;
      height: 100px;
      margin-left: 20px;
    }
    .track{
        width: 260px;
        height: 70px;
    }
    .track_img{
        float: left;
        width: 70px;
        height: 70px;
        border-radius: 10px;
    }
    .track_text{
        width: 260px;
        height: 44.15px;
        font-size: 16px;
        color: #40404C;
        margin-left: 80px;
    }
    .track_databoard{
        width: 260px;
        height: 18.8px;
        margin-left: 80px;
    }
    .track_box1{
        // width: 80px;
        height: 18.4px;
        float: left;
    }
    .track_box2{
        width: 50px;
        height: 18.4px;
        float: left;
    }
    .track_icon{
        width: 12px;
        height: 12px;
        margin-right: 4px;
    }
    .track_text1{
        height: 18px;
        font-size: 12px;
        color: #999;
        margin-top: 6px;
    }
    .track_text2{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 65px;
        height: 18px;
        font-size: 12px;
        color: #999;
        margin-top: 6px;
        margin-left: 8px;
    }
    </style>